<template>
  <!-- 商家套餐 -->
  <div id="add">
    <!-- 列表 -->
    <el-card class="box-card" style="margin-bottom: 20px">
      <el-button type="success" @click="add()" style="
          float: left;
          padding: 3px 0;
          width: 110px;
          height: 32px;
          margin-bottom: 10px;
          background-color: #3f75ff;
        ">新增套餐</el-button>
      <el-table :header-cell-style="{ background: '#E6EFFF' }" :data="list" style="width: 100%">
        <el-table-column prop="date" label="商户名称" width="170">
        </el-table-column>
        <el-table-column prop="date" label="套餐名称" width="180">
        </el-table-column>
        <el-table-column prop="date" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="date" label="上一套餐剩余" width="180">
        </el-table-column>
        <el-table-column prop="date" label="扣减金额" width="180">
        </el-table-column>
        <el-table-column prop="num" label="启用日期" width="180">
        </el-table-column>
        <el-table-column prop="" label="过去日期" width="180">
          <template slot-scope="scope">
            <div class="color1" @click="detailAll(scope.row, '4', '设备列表')">
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作日期" width="180">
        </el-table-column>
      </el-table>
    </el-card>
    <div style="text-align: right; margin-right: 90px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
      </el-pagination>
    </div>
    <div>
      <SecondaryPopup :dialogVisible="dialogVisible">
        <div class="slotTile" slot="title">商家套餐设置</div>
        <div class="formBox" slot="formBox">
          <div class="flex_1 foemBoxLeft">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
              <el-form-item label="套餐名称：" prop="name">
                <el-input size="medium" class="input" placeholder="请输入套餐名称" v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="开户价格：" prop="region">
                <el-input size="medium" class="input" placeholder="0" v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="权限：" required>
                <el-col :span="11">
                  <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                      style="width: 100%"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="创建店铺数量：" prop="delivery">
                <el-select v-model="value" placeholder="请选择店铺数量">
                  <el-option label="历下店" value="1"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="有效期类型：" prop="type">
                <el-select v-model="value" placeholder="请选择店铺数量">
                  <el-option label="长期有效" value="1"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="有效期：" prop="resource">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="套餐成本价：" prop="desc">
                <el-input class="input" :disabled="true" placeholder="--" v-model="ruleForm.name"></el-input>
                <div class="hint">
                  套餐成本价：代理商为商户设置套餐需扣除的金额：套餐成本价=（开户价格+权限价格）
                  x店铺数量系数x有效期系数；权限价格=所选插件价格之和+所选终端价格之和
                </div>
              </el-form-item>
              <el-form-item label="套餐售价：" prop="desc">
                <el-input class="input" :disabled="true" placeholder="--" v-model="ruleForm.name"></el-input>
                <div class="hint">
                  套餐成本价：代理商向商家收取的费用价格（仅供参考，具体以设计业务为准）
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="flex_1">qweqweq</div>
        </div>
      </SecondaryPopup>
    </div>
  </div>
</template>
<script>
import SecondaryPopup from "../elementModule/SecondaryPopup.vue"
export default {
  components: {
    SecondaryPopup
  },
  data() {
    return {
      list: [
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          state: "1",
          time: "0"
        },
        {
          name: "李四",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 5,
          state: "2",
          time: "2023-11-8"
        }
      ],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      currentPage4: 1,
      dialogVisible: false
    }
  },
  methods: {
    // 添加套餐
    add() {
      this.dialogVisible = true
      console.log("添加套餐")
    },
    handleSizeChange() { },
    handleCurrentChange() { }
  }
}
</script>

<style scoped>
#add {
  min-height: 100vh;
  /* background-color: #f1f4f9 !important; */
  position: relative;
}

.hint {
  color: #a0a0a0;
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
}

.formBox {
  display: flex;
  margin-top: 28px;
  box-sizing: border-box;
}

.slotTile {
  font-size: 16px;
  font-weight: 700;
}

.max_box {
  align-items: center;
}

.img_up_item {
  width: 86px;
  height: 86px;
  border-radius: 8px;
}

.father_box {
  width: 86px;
  height: 86px;
  position: relative;
}

.item_box {
  width: 86px;
  height: 86px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  z-index: 111;
  background-color: rgba(0, 0, 0, 0.5);
}

.din {
  position: relative;
}

/deep/ .el-upload {
  text-align: left !important;
}

.img_icon {
  width: 20px;
  margin: 0 5px 20px 0;
}

.el-upload {
  text-align: left;
}

.frame_left {
  padding-left: 20px;
  border-left: 1px solid #d9d9d9;
}

.el-select {
  width: 90%;
}

.el-input {
  width: 90%;
}

.el-form-item {
  margin-bottom: 20px !important;
}

.background_item {
  text-align: right;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.background {
  text-align: right;
  margin-top: 40px;
}

.reset_button_q {
  padding: 10px;
  height: 50%;
  color: #3f75ff;
  border: 1px solid #3f75ff;
}

.tetx_ges {
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #555353;
}

.img_up {
  border-radius: 10px;
  margin-right: 10px;
  text-align: left;
}

.width_50 {
  width: 50%;
}

#add {
  background-color: #fff;
}

.reset_button {
  background-color: #fff;
  color: #0067d9;
  border-radius: 4px;
  border: 1px solid #0067d9;
}

.button {
  background-color: #0067d9;
  color: #fff;
}

.text_span {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ff5252;
}

.el-radio {
  /* margin-right: 4px !important; */
  margin: 15px 8px 4px 0;
}

.margin_left {
  margin-left: 40px;
}

.tar {
  text-align: right;
}

/deep/ .el-table__cell {
  text-align: center;
}

.iclass {
  font-size: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deleteClass {
  position: relative;
  flex: 1;
}

.deleteClass1 {
  position: relative;
  flex: 1;
}

.deleteClass2 {
  position: relative;
  flex: 1;
}

.deleteClass4 {
  position: relative;
  flex: 1;
}

.img_main {
  margin-right: 20px;
}

.zc_text {
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  margin: 33px 0 0 15px;
}

.div_tetx {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #7c7c7c;
}

.i_tetx {
  font-size: 25px;
  margin-top: 15px;
}

.upload_img {
  width: 86px;
  height: 86px;
  background: #e3e3e3;
  border-radius: 6px 6px 6px 6px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 30%;
  height: 30%;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-picker-panel__shortcut {
  color: red;
}

.time_box {
  display: flex;
}

.img_text {
  font-size: 22px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #8e4e40;
  margin: 10px 0 0 15px;
}

.color1 {
  color: #23a90d;
  margin-left: 20px;
}

.color {
  color: #2395ff;
  margin-left: 20px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

.el-form.el-form--inline .el-form-item {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.data_look {
  padding: 0 20px;
  padding-bottom: 10px;
}

.color_white {
  color: #fff;
}

.box-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0) !important;
}

>>>.el-card {
  border: 0px;
}</style>
